<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=0.5,minimum-scale=0.5,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的订单</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/aui.css" />
    <style>
        body {
            background-color: #F4F4F4;
        }

        .order {
            height: 317px;
            background-color: #FFFFFF;
            margin-bottom: 12px;
            padding: 30px 20px 20px;
            font-size: 28px;
        }

        .order_title {
            color: #404040;
            padding-right: 20px;
        }

        .wait {
            font-size: 28px;
            color: #F04040;
        }

        .process {
            font-size: 28px;
            color: #2E97FF;
        }

        .done {
            font-size: 28px;
            color: #555555;
        }

        .arrow {
            width: 12px;
            height: 40px;
            background: url(__IMG__/right_arrow.png) no-repeat center center;
            background-size: 12px 22px;
            margin-left: 20px;
        }

        .time {
            font-size: 24px;
            color: #B7B7B7;
            padding-bottom: 20px;
        }

        .price {
            font-size: 30px;
            color: #F04040;
        }

        .num {
            font-size: 26px;
            color: #B7B7B7;
        }

        .goods {
            width: 100px;
            height: 100px;
            margin-right: 22px;
        }

        .goods img {
            width: 100%;
            height: 100%;
        }

        .goods_pic {
            margin-bottom: 20px;
        }

        .remain {
            font-size: 28px;
            color: #555555;
            padding-top: 5px;
            padding-right: 14px;
        }

        .label {
            width: 142px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 4px;
            background: -webkit-linear-gradient(right, #F04040, #FF7A7A);
            font-size: 28px;
            color: #FFFFFF;
        }

        .label1 {
            width: 142px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 4px;
            border: 1px solid #F04040;
            font-size: 28px;
            color: #F04040;
        }

        .ovfHiden{overflow: hidden;height: 100%;}
    </style>
    <style>
        .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 1.4rem;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 3.4rem;
        }

        .aui-icon-tu {
            height: 3.4rem;
            width: 98px;
            background: url('__IMG__/left.png') no-repeat 1rem center;
            background-size: 20px 35px;
        }

        .aui-bar-nav .aui-pull-right {
            padding-right: 1.5rem;
        }

        .aui-bar-nav .aui-iconfont {
            position: relative;
            z-index: 20;
            font-size: 1.5rem;
            color: #2E82FF;
            line-height: 3.4rem;
        }

        .aui-tab-item {
            height: 3.4rem;
            line-height: 3.4rem;
            color: #555;
            font-size: 28px;
        }

        .aui-tab-item.aui-active {
            color: #F04040;
            font-size: 28px;
            position: relative;
            border-bottom: none !important;
        }

        .sss {
            width: 100%;
        }

        .aui-tab {
            background-color: #F4F4F4;
        }

        .aui-active:after {
            content: '';
            display: block;
            height: 0px;
            width: 60px;
            border-top: 2px solid #F04040;
            bottom: 0px;
            position: absolute;
            left: 30%;
        }
    </style>
</head>

<body>
<header class="aui-bar aui-bar-nav underLine">
    <a class="aui-pull-left" onclick="myindex()"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title" style="font-size: 32px;line-height: 3.4rem">我的订单</div>
</header>
<div class="aui-tab bar">
    <div class="underLine sss aui-tab bar nav" id="tab">
        <div class="aui-tab-item {if $type == 0} aui-active {/if}" onclick="order(0)">
            全部
        </div>
        <div class="aui-tab-item {if $type == 1} aui-active {/if}" onclick="order(1)">
            待付款
        </div>
        <div class="aui-tab-item {if $type == 2} aui-active {/if}" onclick="order(2)">
            待收货
        </div>
        <div class="aui-tab-item {if $type == 3} aui-active {/if}" onclick="order(3)">
            待评价
        </div>
        <div class="aui-tab-item {if $type == 4} aui-active {/if}" onclick="order(4)">
            已完成
        </div>
        <div class="aui-tab-item {if $type == 5} aui-active {/if}" onclick="order(5)">
            退款
        </div>
    </div>
</div>
     <div class="seat1 {if $order} hidden {/if}" id="seatAll">
     		<img src="__IMG__/quexing/no_content.png" class="seatImg1"/>
     		<div class="seatName1">没有符合条件的内容</div>
    </div>

<div id="list"></div>
{volist name='order' id='o'}
	<div class="order" id="order_{$o.order_id}" onclick="openOrderDate(this)" order_status='{$o.order_status}' order_id='{$o.order_id}'>
        <div class="order_title flex-wrap">
            <div>{$o.s_name}</div>
            <div class="arrow"></div>
            <div class="flex-con"></div>
            {if $o.order_in_out=='1'}
                {if $o.order_status=='1' }
                <div class="wait">待付款</div>
                {elseif $o.order_status=='2' /}
                <div class="wait">进行中</div>
                {elseif $o.order_status=='3' /}
                <div class="wait">待评价</div>
                {elseif $o.order_status=='4' /}
                <div class="wait">已完成</div>
                {/if}
            {else /}
                <div class="wait">退款申请</div>
            {/if}
        </div>
        <div class="time">{$o.order_time ?? ''}</div>
        <div class="flex-wrap goods_pic">
            <div class="flex-con">
                <div class="flex-wrap">
                	{volist name="o['goods']" id='g' offset="1" length='3'}
 <img class="goods" src="{$g.oi_good_thumb ?? '__IMG__/zhanweitu/a3.png'}" />
           			{/volist}
           			
                </div>
            </div>
            <div>
                <div class="price">￥{$o.order_user_pay}</div>
                <div class="num">共<?php echo count($o['goods']); ?>件</div>
            </div>
        </div>
        {if $o.order_in_out=='1'}
            {if $o.order_status=='1'}
            <div class="last flex-wrap">
                <div class="flex-con"></div>
                <div class="remain">还剩<span class="daojishi" otime="{$o.order_time}" orderid="{$o.order_id}" id="timeee_{$o.order_id}"></span></div>
                <div class="label" onclick="againPay({$o.order_id})">去支付</div>
            </div>
            {elseif $o.order_status=='2' /}

            <div class="last flex-wrap">
                <div class="flex-con"></div>
                <div class="label1">订单详情</div>
                <!--<div class="label1" onclick="sureorder({$o.order_id})">确认收货</div>-->
            </div>

            {elseif $o.order_status=='3' /}
             <div class="last flex-wrap">
                <div class="flex-con"></div>
                <div class="label1" oid="{$o.order_id}" s_thumb="{$o.s_thumb}" s_name="{$o.s_name}" onclick="gocomment(this)">写评论</div>
            </div>

             {elseif $o.order_status=='4' /}
             <div class="last flex-wrap">
                <div class="flex-con"></div>
                <div class="label1">已完成</div>
            </div>
            {/if}
        {else /}
        <div class="last flex-wrap">
            <div class="flex-con"></div>
            <div class="label1">
                {if $o.order_in_out=='2'}申请中{/if}
                {if $o.order_in_out=='3'}退款成功{/if}
                {if $o.order_in_out=='4'}退款失败{/if}
            </div>
        </div>
        {/if}
    </div>
{/volist}
</body>
<div class="all_div" style="display:none;width: 100%;height: 100%;background-color: gray;position: absolute;z-index: 100;opacity: 0.5;top: 0;left: 0;background-color: black"></div>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script type="text/javascript">
    //返回
    function myindex(){
        location.href = '{:url("home/My/index")}';
    }
    function order(type) {
        location.href = '{:url("Orders/index")}?type='+type;
    }
    timeTimer();
    //单纯分钟和秒倒计时
    var timer = setInterval(jishiMs,1000);
    function jishiMs() {
        if($('.daojishi').length <= 0){
            clearInterval(timer);
        }else{
            timeTimer();
        }
    }
    function timeTimer() {
        if($('.daojishi').length > 0) {
            $('.daojishi').each(function (data, index) {
                var orderTime = $(this).attr('otime');
                var nowTime = Date.parse(new Date());
                var oid = $(this).attr('orderid');
                var time1 = datetime_to_unix(orderTime);
                var cha = nowTime / 1000 - time1;
                if (cha < 1800) {
                    var M = 29 - Math.floor(cha / 60);
                    var S = 59 - Math.floor(cha % 60);
                    if (M < 10) {
                        M = '0' + M;
                    }
                    if (S < 10) {
                        S = '0' + S;
                    }
                    $(this).text(M + ':' + S);
                } else {
                    $.ajax({
                        url: '{:url("Orders/cancelOrder")}',
                        data: 'order_id=' + oid,//
                        type: 'POST',
                        dataType: 'JSON',
                        success: function (returndata) {
                            if (returndata.status == 200) {
                                $('#order_' + oid).remove();
                            } else {
                                alert(returndata.msg);
                            }
                        },
                        error: function () {
                            alert('Ajax error!');
                        }
                    })
                }
            })
        }
    }
    function datetime_to_unix(datetime){
        var tmp_datetime = datetime.replace(/:/g,'-');
        tmp_datetime = tmp_datetime.replace(/ /g,'-');
        var arr = tmp_datetime.split("-");
        var now = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5]));
        return parseInt(now.getTime()/1000);
    }
    //再次支付
    function againPay(oid) {
        event.stopPropagation();
        $.ajax({
            url:'{:url("Orders/onlyPay")}',
            data: 'order_id='+oid+'&type=1',//
            type:'POST',
            dataType:'HTML',
            success: function(returndata){
                if(returndata == 1){
                    layer.open({
                        content: '订单生成失败'
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }else if(returndata == 2){
                    layer.open({
                        content: '支付数据更改失败'
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }else{
                    $('html,body').addClass('ovfHiden');
                    $('.all_div').css('display','block');
                    $('.all_div').html(returndata);
                }
            },
            error:function () {
                alert('Ajax error!');
            }
        })
    }
    //确认收货
    function sureorder(oid) {
        event.stopPropagation();
        if(confirm('确认收货吗？')){
            $.ajax({
                url:'{:url("Orders/getMyOrder")}',
                data: 'order_id='+oid,//
                type:'POST',
                dataType:'json',
                success: function(returndata){
                    if(returndata.status == 200){
                        location.reload();
                    }else{
                        alert(returndata.msg)
                    }
                },
                error:function () {
                    alert('Ajax error!');
                }
            })
        }
    }
//    function gocomment(el) {
//        event.stopPropagation();
//        var oid = $(el).attr('oid');
//        var thu = $(el).attr('s_thumb');
//        var name = $(el).attr('s_name');
//        var type = {$type};
//        location.href = '{:url("Orders/goComment")}?order_id='+oid+'&type='+type+'&s_thumb='+thu+'&s_name='+name;
//    }
    //查看详情
    function openOrderDate(el) {
        var oid = $(el).attr('order_id');
        var type = {$type};
        location.href = '{:url("Orders/myOrderInfo")}?order_id='+oid+'&type='+type;
    }
</script>

</html>
